import React,{ Component } from "react";
import {
  Card,
  Button,
  Row,
  Col,
  Icon,
  Tabs,
  Table,
  Radio,
  DatePicker,
  Tooltip,
  Menu,
  Dropdown,
  Input,
  Divider,
} from 'antd';
import { withRouter } from 'react-router-dom'

import BaseHttpComonentHOC,{ApiEnum} from '../../HOC/BaseHttpComonentHOC'

import  ReactToPrint from 'react-to-print'
import  styles from  './RepairInfoTpPrint.less'

import shopInfo,{parseIntVaild} from  '../../../utils/LoginUserUtil'


 class RepairInfoToPrint extends Component {

  constructor(props) {
    super(props)
    this.state = {
        repId:'1'
    }
  }


  render() {
    const {data} = this.props

    const arrItems = data.items
    const  gutter = 0

    let arrGoodFee = []
    let arrServicesFee = []
    let arrNormalFee = []

    let goodsPriceTotal = 0
    let servicesPriceTotal = 0
    let normalPriceTotal = 0

    arrItems.forEach((item)=>{
      if(item.goods != undefined){
        arrGoodFee.push(item)
        let _price = parseIntVaild(item.price) * parseIntVaild(item.num)
        goodsPriceTotal+=_price
      }else if(item.service != undefined){
        arrServicesFee.push(item)
        let _price = (parseIntVaild(item.price)+parseIntVaild(item.workhourpay)) * parseIntVaild(item.num)
        servicesPriceTotal+=_price
      }else {
        arrNormalFee.push(item)
        let _price = parseIntVaild(item.price) * parseIntVaild(item.num)
        normalPriceTotal+=_price
      }
    })

    let total = goodsPriceTotal+servicesPriceTotal+normalPriceTotal

    const headerRender = (   <Row className={styles.bgRowCellStyle} gutter={gutter}>
      <Col className={styles.colBgLeft} span={6} >
        <span className={styles.spanStyle}>{shopInfo.advtip()}</span>
      </Col>
      <Col offset={14} span={4}>
        <img className={styles.icon3} src={shopInfo.shopXCXLogo()}></img>
      </Col>
    </Row>)

    const contacterRender=(
      <div
        className={ styles.top}
      >
         <p className={styles.sectionTitle}>{'车主信息'}</p>
        <Row className={styles.bgRowCellStyle} gutter={gutter}>
        <Col span={4} >
          <span className={styles.spanStyle}>送修客户</span>
        </Col>
        <Col  span={4} >
          <span className={styles.spanContentStyle}>{data.contact.name}</span>
        </Col>
          <Col span={4} >
            <span className={styles.spanStyle}>工单号</span>
          </Col>
          <Col span={8} >
            <span className={styles.spanContentStyle}>{data._id}</span>
          </Col>

      </Row>
        <Row className={styles.bgRowCellStyle} gutter={gutter}>
          <Col span={4} >
            <span className={styles.spanStyle}>客户号码</span>
          </Col>
          <Col  span={4} >
            <span className={styles.spanContentStyle}>{data.contact.tel}</span>
          </Col>
          <Col  span={4} >
            <span className={styles.spanStyle}>车牌号 </span>
          </Col>
          <Col  span={4} >
            <span className={styles.spanContentStyle}>{data.contact.carcode}</span>
          </Col>
          {/*<Col span={4} >*/}
          {/*  <span className={styles.spanStyle}>进店油量</span>*/}
          {/*</Col>*/}
          {/*<Col  span={4} >*/}
          {/*  <span className={styles.spanContentStyle}>{data.oilvolume}</span>*/}
          {/*</Col>*/}
        </Row>
        <Row className={styles.bgRowCellStyle} gutter={gutter}>
          {/*<Col  span={4} >*/}
          {/*  <span className={styles.spanStyle}>进店里程</span>*/}
          {/*</Col>*/}
          {/*<Col span={4} >*/}
          {/*  <span className={styles.spanContentStyle}>{data.totalkm}</span>*/}
          {/*</Col>*/}
          <Col  span={4} >
            <span className={styles.spanStyle}>车   型</span>
          </Col>
          <Col  span={8} >
            <span className={styles.spanContentStyle}>{data.contact.cartype}</span>
          </Col>
        </Row>
        <Row className={styles.bgRowCellStyle} gutter={gutter}>
          <Col span={4} >
            <span  className={styles.spanStyle}>进店时间</span>
          </Col>
          <Col  span={4} >
            <span className={styles.spanContentStyle}>{data.entershoptime}</span>
          </Col>
          <Col span={4} >
            <span  className={styles.spanStyle}>结算时间</span>
          </Col>
          <Col  span={4} >
            <span className={styles.spanContentStyle}>{data.wantedcompletedtime}</span>
          </Col>
        </Row>
      </div>

    )

    const shoperRender = (
        <div
          className={ styles.printBG}
        >
          <p className={styles.sectionTitle}>{'门店信息'}</p>
        <Row className={styles.bgRowCellStyle} gutter={gutter}>
          <Col span={4} >
            <span className={styles.spanStyle}>门店地址</span>
          </Col>
          <Col span={20} >
            <span className={styles.spanContentStyle}>{shopInfo.address()}</span>
          </Col>
        </Row>
        <Row className={styles.bgRowCellStyle} gutter={gutter}>
          <Col span={4} >
            <span className={styles.spanStyle}>服务热线</span>
          </Col>
          <Col span={20} >
            <span className={styles.spanContentStyle}>{shopInfo.tel()}</span>
          </Col>
        </Row>

      </div>
    )

    const  descRender = (
      <div
        className={ styles.printBG}
      >
        <p className={styles.sectionTitle}>{'维修信息'}</p>
      <Row className={styles.bgRowCellStyle} gutter={gutter}>
        <Col span={4} >
          <span className={styles.spanStyle}>维修内容</span>
        </Col>
        <Col  span={20} >
          <span className={styles.spanContentStyle}>{data.repairtype}</span>
        </Col>
      </Row>
      <Row className={styles.bgRowCellStyle} gutter={gutter}>
        <Col  span={4} >
          <span className={styles.spanStyle}>服务备注</span>
        </Col>
        <Col  span={20} >
          <span className={styles.spanContentStyle}>{data.addition}</span>
        </Col>
      </Row>
      <Row className={styles.bgRowCellStyle} gutter={gutter}>
        <Col  span={4} >
          <span className={styles.spanStyle}>用户备注</span>
        </Col>
        <Col  span={20} >
          <span className={styles.spanContentStyle}>{data.customremark}</span>
        </Col>
      </Row>
      </div>)

    const goodsItemsRender=(
        <div
          className={ styles.printBG}
        >
          <p className={styles.sectionTitle}>{'材料收费'}</p>
        <Row className={styles.bgRowCellStyle} gutter={gutter}>
          <Col span={2} >
            <span className={styles.spanStyle}>序号</span>
          </Col>
          <Col  span={6} >
            <span className={styles.spanStyle}>材料名称</span>
          </Col>
          <Col  span={2} >
            <span className={styles.spanStyle}>单位</span>
          </Col>
          <Col  span={3} >
            <span className={styles.spanStyle}>单价(元)</span>
          </Col>
          <Col  span={3} >
            <span className={styles.spanStyle}>数量</span>
          </Col>
          <Col  span={3} >
            <span className={styles.spanStyle}>金额(元)</span>
          </Col>
        </Row>
        {
          arrGoodFee.map((item,i)=>{
            return <Row className={styles.bgRowCellStyle} gutter={gutter}>
              <Col  span={2} >
                <span className={styles.spanStyle}>{i+1}</span>
              </Col>
              <Col span={6} >
                <span className={styles.spanStyle}>{item.goods.name}</span>
              </Col>
              <Col  span={2} >
                <span className={styles.spanStyle}>{item.goods.unit}</span>
              </Col>
              <Col  span={3} >
                <span className={styles.spanStyle}>{parseIntVaild(item.price)}</span>
              </Col>
              <Col  span={3} >
                <span className={styles.spanStyle}>{parseIntVaild(item.num)}</span>
              </Col>
              <Col  span={3} >
                <span className={styles.spanStyle}>{parseIntVaild(item.price) * parseIntVaild(item.num)}</span>
              </Col>

            </Row>
          })
        }
        <Row className={styles.bgRowCellStyle} gutter={gutter}>
          <Col span={4} >
            <span className={styles.spanStyle}>材料收费总计:</span>
          </Col>
          <Col  span={6} >
            <span className={styles.spanStyle}>{goodsPriceTotal}</span>
          </Col>
        </Row>
        </div>
    )

    const serviceItemsRender=(
        <div
          className={ styles.printBG}
        >
          <p className={styles.sectionTitle}>{'服务收费'}</p>
        <Row className={styles.bgRowCellStyle} gutter={gutter}>
          <Col span={2} >
            <span className={styles.spanStyle}>序号</span>
          </Col>
          <Col  span={6} >
            <span className={styles.spanStyle}>服务</span>
          </Col>
          <Col  span={4} >
            <span className={styles.spanStyle}>单价</span>
          </Col>
          <Col  span={4} >
            <span className={styles.spanStyle}>工时</span>
          </Col>
          <Col  span={4} >
            <span className={styles.spanStyle}>数量</span>
          </Col>
          <Col  span={4} >
            <span className={styles.spanStyle}>金额(元)</span>
          </Col>
        </Row>
        {
          arrServicesFee.map((item,i)=>{
            return <Row className={styles.bgRowCellStyle} gutter={gutter}>
              <Col span={2} >
                <span className={styles.spanStyle}>{i+1}</span>
              </Col>
              <Col  span={6} >
                <span className={styles.spanStyle}>{item.type}</span>
              </Col>
              <Col  span={4} >
                <span className={styles.spanStyle}>{parseIntVaild(item.price)}</span>
              </Col>
              <Col  span={4} >
                <span className={styles.spanStyle}>{parseIntVaild(item.workhourpay)}</span>
              </Col>
              <Col  span={4} >
                <span className={styles.spanStyle}>{parseIntVaild(item.num)}</span>
              </Col>
              <Col  span={4} >
                <span className={styles.spanStyle}>{(parseIntVaild(item.price)+parseIntVaild(item.workhourpay)) * parseIntVaild(item.num)}</span>
              </Col>
            </Row>
          })
        }
        <Row className={styles.bgRowCellStyle} gutter={gutter}>
          <Col span={4} >
            <span className={styles.spanStyle}>服务收费总计:</span>
          </Col>
          <Col  span={6} >
            <span className={styles.spanStyle}>{servicesPriceTotal}</span>
          </Col>
        </Row>
        </div>
    )

    const normalItemsRender=(
        <div
          className={ styles.printBG}
        >
          <p className={styles.sectionTitle}>{'普通快捷收费'}</p>
        <Row className={styles.bgRowCellStyle} gutter={gutter}>
          <Col span={2} >
            <span className={styles.spanStyle}>序号</span>
          </Col>
          <Col  span={6} >
            <span className={styles.spanStyle}>服务</span>
          </Col>
          <Col  span={4} >
            <span className={styles.spanStyle}>单价</span>
          </Col>
          <Col  span={4} >
            <span className={styles.spanStyle}>数量</span>
          </Col>
          <Col  span={4} >
            <span className={styles.spanStyle}>金额(元)</span>
          </Col>
        </Row>
        {
          arrNormalFee.map((item,i)=>{
            return <Row className={styles.bgRowCellStyle} gutter={gutter}>
              <Col span={2} >
                <span className={styles.spanStyle}>{i+1}</span>
              </Col>
              <Col  span={6} >
                <span className={styles.spanStyle}>{item.type}</span>
              </Col>
              <Col  span={4} >
                <span className={styles.spanStyle}>{parseIntVaild(item.price)}</span>
              </Col>
              <Col  span={4} >
                <span className={styles.spanStyle}>{parseIntVaild(item.num)}</span>
              </Col>
              <Col  span={4} >
                <span className={styles.spanStyle}>{parseIntVaild(item.price) * parseIntVaild(item.num)}</span>
              </Col>
            </Row>
          })
        }
        <Row className={styles.bgRowCellStyle} gutter={gutter}>
          <Col span={4} >
            <span className={styles.spanStyle}>普通快捷收费总计:</span>
          </Col>
          <Col  span={6} >
            <span className={styles.spanStyle}>{normalPriceTotal}</span>
          </Col>
        </Row>
      </div>
    )

    const  moneyRender = (
      <div
        className={ styles.printBG}
      >
        <p className={styles.sectionTitle}>{'收费合计'}</p>
      <Row className={styles.bgRowCellStyle} gutter={gutter}>
        <Col span={4} >
          <span className={styles.spanStyle}>材料收费</span>
        </Col>
        <Col  span={4} >
          <span className={styles.spanContentStyle}>{goodsPriceTotal}</span>
        </Col>
        <Col  span={4} >
          <span className={styles.spanStyle}>服务收费</span>
        </Col>
        <Col  span={4} >
          <span className={styles.spanContentStyle}>{servicesPriceTotal}</span>
        </Col>
        <Col  span={4} >
          <span className={styles.spanStyle}>普通快捷收费</span>
        </Col>
        <Col  span={4} >
          <span className={styles.spanContentStyle}>{normalPriceTotal}</span>
        </Col>
      </Row>
      <Row className={styles.bgRowCellStyle} gutter={gutter}>
        <Col  span={4} >
          <span className={styles.spanStyle}>减免金额</span>
        </Col>
        <Col  span={4} >
          <span className={styles.spanContentStyle}>{data.saleMoney}</span>
        </Col>
        <Col  span={4} >
          <span className={styles.spanStyle}>挂帐金额</span>
        </Col>
        <Col  span={4} >
          <span className={styles.spanContentStyle}>{data.ownnum}</span>
        </Col>
      </Row>
        <Row className={styles.bgRowCellStyle} gutter={gutter}>
          <Col  span={4} >
            <span className={styles.spanStyle}>总计</span>
          </Col>
          <Col  span={4} >
            <span className={styles.spanContentStyle2}>{total-parseIntVaild(data.saleMoney)-parseIntVaild(data.ownnum)}</span>
          </Col>
        </Row>
    </div>)

    const  lefOldtGoodsRender = (
      <div
        className={ styles.printBG}
      >
        <p className={styles.sectionTitle}>{'旧件处理'}</p>
      <Row className={styles.bgRowCellStyle} gutter={gutter}>
        <Col span={4} >
          <span className={styles.spanStyle}>注:旧件已确认</span>
        </Col>
        <Col  span={6} >
          <span className={styles.spanStyle}>由客户回收</span>
        </Col>
        <Col  span={6} >
          <span className={styles.spanStyle}>客户声明放弃</span>
        </Col>
        <Col  span={6} >
          <span className={styles.spanStyle}>无旧配件</span>
        </Col>
      </Row>
      </div>)

    const  signRender = (
      <div
        className={ styles.bottom}
      >
        <p className={styles.sectionTitle}>{'签字结算'}</p>
      <Row className={styles.bgRowCellStyle} gutter={gutter}>
        <Col span={3} >
          <span className={styles.spanStyle}>结算员签字</span>
        </Col>
        <Col offset={6}  span={3} >
          <span className={styles.spanStyle}>客户签字</span>
        </Col>

        <Col  offset={6} span={3} >
          <span className={styles.spanStyle}>日期</span>
        </Col>

      </Row>
      </div>)

    const  tipRender = (
        <div
          className={ styles.printBG}
        >
          <p className={styles.sectionTitle}>{'友情提示'}</p>
      <Row className={styles.bgRowCellStyle} gutter={gutter}>
        <Col span={4} >
          <span className={styles.spanStyle}>建议下次保养公里数</span>
        </Col>
        <Col offset={2} span={6} >
          <span className={styles.spanStyle}>{data.nexttipkm+'公里'}</span>
        </Col>
        <Col span={4} >
          <span className={styles.spanStyle}>建议下次保养时间</span>
        </Col>
        <Col offset={2} span={6} >
          <span className={styles.spanStyle}>{data.tipcircle}</span>
        </Col>
      </Row>
        </div>)

    return (

        <div className={styles.divBg}>
          {/*<Row>*/}
            {/*<Col offset={22} span={2}>*/}
              {/*<ReactToPrint*/}
                {/*trigger={() => <Button size='large' icon="printer" type="primary" onClick={()=>{*/}

                {/*}}>打印</Button>}*/}
                {/*content={() => this.componentRef}*/}
              {/*/>*/}
            {/*</Col>*/}
          {/*</Row>*/}
          {/*<div  ref={el => (this.componentRef = el)}>*/}
            {/*{headerRender}*/}

          <h3 className={styles.title}>{shopInfo.shopName()+'维修结算清单'}</h3>
            {contacterRender}
            {shoperRender}
            {/*{descRender}*/}
            {goodsItemsRender}
            {serviceItemsRender}
            {normalItemsRender}
            {moneyRender}
            {/*{lefOldtGoodsRender}*/}
            {signRender}
            {/*{tipRender}*/}
        </div>
    );
  }
}

export default  BaseHttpComonentHOC(RepairInfoToPrint)(ApiEnum.repInfo)

// export default RepairInfoToPrint

